<template>
  <div>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <h1>Total view</h1>

    <static-button class="add-button" :title="addButton.title"></static-button>
    <content-table scope="props" :data="data">
      <content-table-column dataIndex="_id" prop="hidden" class="table-panel"></content-table-column>

      <content-table-column dataIndex="title" label="Title"></content-table-column>

      <content-table-column dataIndex="document" label="Document" width="300"></content-table-column>

      <content-table-column dataIndex="lastUpdateDate" label="lastUpdateDate"  width="200"></content-table-column>

      <content-table-column dataIndex="test5" prop="custom" label="test5">
        <static-button :title="'modify'" @click="onModifyButtonClick"></static-button>
      </content-table-column>

      <content-table-column dataIndex="test3" prop="custom" label="test3">
        <static-button :title="'delete'" @click="onDeleteButtonClick"></static-button>
      </content-table-column>
    </content-table>
  </div>
</template>
<style scoped>
  .add-button{
    margin-left: 20%;
    margin-bottom: 20px;
  }
  .table-panel{
    margin: auto;
    width: 80%;
  }
</style>

<script>

  import zhRequest from '../../utils/geralt_common/network_function';
  import manageInterface from '../../interface/manageInterface';
  import manageConstant from '../../constant/manageConstant';

  let contentTable = resolve => {
    require(['../../components/content_table/index.vue'],resolve);
  }
  let contentTableColumn = resolve => {
    require(['../../components/content_table/src/testcolumn'],resolve);
  }
  let staticButton = resolve =>{
    require(['../../components/buttom/index'],resolve);
  }

  export default {
    name: 'HelloWorld',
    beforeCreate(){
      let self = this;
      zhRequest.get(
        manageInterface.adminBlogDocumentUrl,
        {},
        (result) => {
        	self.data = result.data;
        },
        (result) => {
          alert('fallback');
        }
      )
    },
    components:{
      contentTable,
      contentTableColumn,
      staticButton,
    },
    data () {
      return {
        addButton: {
          title: 'Add'
        },
        flag: 1,
        msg: 'Welcome to Your Vue.js App',
        data: []
      }
    },
    methods:{
      onModifyButtonClick:function(item){
    		console.log(item.$vnode.parent);
        this.$router.push({path:'/manage/edit',query: {cellItem: item.$vnode.parent}});
      },
      onDeleteButtonClick: function(item){
        let data = item.$vnode.parent.item;
        zhRequest.delete(
          manageInterface.adminBlogDocumentUrl + '/'+data._id,
          {},
          (result) => {

          },
          (result) => {

          })
      },
    }
  }
</script>

